<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <link rel="stylesheet" href="./assets/test3.css"/>
    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_20662_27.e5347a7e2b5eda877b4390f7cf384910.js"></script>
</head>

<body>
<div class="container">
    <header class="head">

        <div class="head-left">
            <button class="back">
                <iconpark-icon name="left" size="25"></iconpark-icon>
            </button>
            <button class="forward">
                <iconpark-icon name="right" size="25"></iconpark-icon>
            </button>
        </div>

        <nav class="head-mid">
            <a>首页</a>
            <a>发现</a>
            <a>音乐库</a>
            <a>本地音乐</a>
        </nav>


        <div class="head-right">
            <div class="search-box">
                <button class="search-icon">
                    <iconpark-icon name="search" size="15"></iconpark-icon>
                </button>
                <input type="text" class="search-text" maxlength="64"/>
                <button class="search-cancel">
                    <iconpark-icon name="close-small" size="15"></iconpark-icon>
                </button>
                <div class="blank-h"></div>
            </div>
        </div>

        <div class="bank"></div>

    </header>
    <main class="main">
        <aside class="sidebar">
            <ul class="node-content">
            </ul>
        </aside>
        <section class="music-list">
            <div class="table-container">
                <div class="table-header">
                    <div class="list-row list-header">
                        <div class="cell">歌曲名</div>
                        <div class="cell">歌手</div>
                        <div class="cell">专辑</div>
                        <div class="cell">时长</div>
                    </div>
                </div>
                <div class="table-body">

                </div>

            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="progress-bar"></div>
        <div class="controls">
            <div class="music-info">
                <div class="music-cover"></div>
                <div class="music-name-container">
                    <div class="music-name">动物派对</div>
                    <div class="music-artist">五月天</div>
                </div>
            </div>

            <div class="music-controls-mid">
                <button class="prev">
                    <iconpark-icon name="go-start" size="30"></iconpark-icon>
                </button>
                <button class="play">
                    <iconpark-icon name="play-one" size="50"></iconpark-icon>

                </button>
                <button class="next">
                    <iconpark-icon name="go-end" size="30"></iconpark-icon>
                </button>
            </div>
            <div class="music-controls-right">
                <button>
                    <iconpark-icon name="volume-small" size="20"></iconpark-icon>
                </button>
                <button>
                    <iconpark-icon name="play-cycle" size="20"></iconpark-icon>
                </button>
                <button>
                    <iconpark-icon name="music-list" size="20"></iconpark-icon>
                </button>
            </div>
        </div>
    </footer>


</div>
</body>
<script src="./assets/test3.js"></script>
</html>